<template>
	<div class="wmzmall_bi">
		<bi-head></bi-head>
		<div class="mainbox dflex">
			<div>
				<bi-class></bi-class>
				<bi-vbRanking></bi-vbRanking>
				<bi-orderRanking></bi-orderRanking>
			</div>
			<div class="pos_r">
				<bi-sta></bi-sta>
				<bi-map></bi-map>
				<bi-order></bi-order>
			</div>
			<div>
				<bi-member></bi-member>
				<bi-gender></bi-gender>
				<bi-table></bi-table>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts';
import china from 'echarts/map/json/china.json';
echarts.registerMap('china', china);
export default {
	data() {
		return {
			timer: 0
		};
	},
	methods: {
		biRefresh() {
			this.timer = setTimeout(() => {
				clearTimeout(this.timer);

				uni.$emit('biRefresh');
				this.biRefresh();
			}, 30 * 1000);
		}
	},
	created() {
		let whei = document.body.clientWidth;
		let htmlEle = document.getElementsByTagName('html')[0];

		htmlEle.classList.add('wmzmall-bi');
		htmlEle.style.fontSize = whei / 20 + 'px';
		window.onresize = () => {
			var whei = document.body.clientWidth;
			htmlEle.style.fontSize = whei / 20 + 'px';
		};
		
		this.biRefresh();
	}
};
</script>

<style>
@font-face {
	font-family: iotfont;
	src: url('@/static/bi/DS-DIGIT.TTF');
}

>>> .iotfont {
	font-family: iotfont;
}

.wmzmall_bi >>> .el-button--mini {
	font-size: 0.1rem !important;
	padding: 0.1rem 0.2rem;
}

.wmzmall_bi {
	overflow: hidden;
	background-size: cover;
	color: #666;
	font-size: 0.1rem;
	width: 100%;
	height: 100%;
	background-color: #020425;
}

.wmzmall_bi >>> .el-button--default:not(.active):focus {
	color: #606266 !important;
}

.wmzmall_bi >>> .el-button:not(.search_btn) {
	background-color: #0b1340 !important;
	box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
	border-color: #053b5d !important;
}

.wmzmall_bi >>> .el-button.is-round.active {
	box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
	cursor: pointer;
	background-color: #0b1340 !important;
	border-color: #02a6b5 !important;
}

.wmzmall_bi >>> .el-button--default:hover {
	box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
	cursor: pointer;
	background-color: #0b1340 !important;
	border-color: #02a6b5 !important;
}

.wmzmall_bi >>> .cut_btn {
	top: 0.12rem;
	right: 0;
}

.mainbox > div {
	width: 30%;
	padding: 0 0.1rem;
}

.mainbox > div:nth-child(2) {
	width: 40%;
	padding: 0;
}

>>> .boxall {
	border: 1px solid rgba(25, 186, 139, 0.17);
	background-color: #040633;
	background-size: 100% auto;
	position: relative;
	margin-bottom: 0.1rem;
	z-index: 10;
}

>>> .boxall:before,
>>> .boxall:after {
	position: absolute;
	width: 0.1rem;
	height: 0.1rem;
	content: '';
	border-top: 2px solid #02a6b5;
	top: 0;
}

>>> .boxall:before,
>>> .boxfoot:before {
	border-left: 2px solid #02a6b5;
	left: 0;
}

>>> .boxall:after,
>>> .boxfoot:after {
	border-right: 2px solid #02a6b5;
	right: 0;
}

>>> .alltitle {
	font-size: 0.2rem;
	color: #fff;
	text-align: center;
	line-height: 0.5rem;
}

>>> .allnav {
	height: calc(100% - 30px);
}

>>> .boxfoot {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
}

>>> .boxfoot:before,
>>> .boxfoot:after {
	position: absolute;
	width: 0.1rem;
	height: 0.1rem;
	content: '';
	border-bottom: 2px solid #02a6b5;
	bottom: 0;
}
</style>
